<template>
  <div :style="sideBarHeadWrapperStyle">
    <div :style="sideBarHeadFlexContainerStyle">
      <div :style="userBarWrapperStyle">菜鸟</div>
      <div :style="sideSplitToggleWrapperStyle">
        <div
          :style="sideSplitToggleSvgWrapperStyle"
          @click="closeSidebar"
          @mouseenter="onCloseSidebarMouseenter"
          @mouseleave="onCloseSidebarMouseleave"
        >
          <icon-font type="icon-side-bar-close-button" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { IconFont } from '@/components/icon-font';
import { Ref } from 'vue';
import { usePageLeftStore } from '@/plugins/pinia/store/page-left';
import { usePageLeftHead } from './style-page-left-head';

const closeSidebarHover = ref(false);
const onCloseSidebarMouseenter = () => {
  closeSidebarHover.value = true;
};
const onCloseSidebarMouseleave = () => {
  closeSidebarHover.value = false;
};

const isSideBarHover = inject<Readonly<Ref<boolean>>>('isSideBarHover', ref(false));
const isSpliterHover = inject<Readonly<Ref<boolean>>>('isSpliterHover', ref(false));

// 是否展示侧边栏收起按钮，鼠标在侧边栏或分割线上时展示
const isShowToggle = computed<boolean>(() => {
  return isSideBarHover.value || isSpliterHover.value;
});

const pageLeftStore = usePageLeftStore();
const closeSidebar = () => {
  pageLeftStore.setAndPersistIsSidebarOpen(false);
};

const {
  sideBarHeadWrapperStyle,
  sideBarHeadFlexContainerStyle,
  userBarWrapperStyle,
  sideSplitToggleWrapperStyle,
  sideSplitToggleSvgWrapperStyle,
} = usePageLeftHead(isShowToggle, closeSidebarHover);
</script>
